let data = [
    {
        id: 1,
        name: 'iPhone 15',
        price: 5999,
    },
    {
        id: 2,
        name: 'iPhone 15 Pro',
        price: 7999,
    },
    {
        id: 3,
        name: 'iPhone 15 Pro Max',
        price: 8999,
    },
];
let table = document.createElement('table');
let thead = document.createElement('thead'); //表头
let tbody = document.createElement('tbody'); //表内容
let tr1 = document.createElement('tr');
let box = document.querySelector('.box');
let btn = document.querySelector('.a');
function draw() {
    thead.append(tr1);
    box.append(table);
    for (const key in data[0]) {
        let th = document.createElement('th'); //头部格
        tr1.append(th);
        th.append(document.createTextNode(key));
    }
    for (const key in data) {
        let tr = document.createElement('tr'); //行
        for (const k in data[key]) {
            let td = document.createElement('td'); //单元格
            td.append(data[key][k]);
            tr.append(td);
        }
        tbody.append(tr);
    }
    table.append(thead);
    table.append(tbody);
}
btn.onclick = draw;
let add = document.querySelector('.add');
let id = document.querySelector('.id');
let name = document.querySelector('.name');
let price = document.querySelector('.price');
add.onclick = function () {
    //存入data里
    let o = {};
    o.id = id.value;
    o.name = name.value;
    o.price = price.value;
    console.log(o);
    data.push(o);
    console.log(data);
    //显示在表格中
    let tr2 = document.createElement('tr');
    for (var i = 0; i < 3; i++) {
        let td = document.createElement('td'); //单元格
        if (i == 0) td.append(id.value);
        if (i == 1) td.append(name.value);
        if (i == 2) td.append(price.value);
        tr2.append(td);
        console.log(td);
    }
    tbody.append(tr2);
    table.append(tbody);
};
